<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="com.system.dao.BaseDao" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.system.util.Constant" %>
<%@ page import="com.system.pojo.User" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.util.List" %>
<%@ page import="com.system.service.BookService.BookService" %>
<%@ page import="com.system.service.BookService.BookServiceImpl" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/5/5
  Time: 12:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>主  页</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
    <script src="/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/layui/layuiadmin/admin.css" media="all">
    <link rel="stylesheet" href="/layui/layuiadmin/login.css" media="all">
    <link rel="stylesheet" href="/layui/layuiadmin/template.css" media="all">
</head>
<body>
<%
    String ImgPath = null;
    String UserName = null;
    try{
        Object o = request.getSession().getAttribute(Constant.USER_SESSION);
        if(o == null){
            request.getRequestDispatcher("error.jsp").forward(request,response);
        }
        ImgPath = ((User)o).getUserImgPath();
        UserName = ((User)o).getUserCode();

    }catch (Exception e){
        System.out.println("异常");
        e.printStackTrace();
    }
%>
<div>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="">个人中心</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><img src="upload/user/<%out.print(ImgPath);%>.jpg" class="layui-nav-img"><%out.print(UserName);%></a>
            <dl class="layui-nav-child">
                <dd><a href="update.jsp">用户信息修改</a></dd>
                <dd><a href="javascript:;">我借阅的图书</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
    <%--<img src="upload/user/<%out.print(ImgPath);%>.jpg" height="30px" width="30px">--%>
</div>


<%--<div style="text-align: center; padding-top: 10px;padding-bottom: 10px">
    <div class="layui-inline">
        <input class="layui-input" style="width: 400px" name="search" type="text" placeholder="搜索">
        <input 	class="layui-btn layui-btn-primary layui-border-blue" type="submit" value="登陆">
    </div>
</div>--%>

<%--
<div class="layui-form-item" style="text-align: center;padding-top: 10px;padding-bottom: 10px">
    <div class="layui-inline">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="upload/book/轮播图.jpg"> </div>
                <div><img src="upload/book/轮播图.jpg"></div>
                <div><img src="upload/book/轮播图.jpg"></div>
                <div><img src="upload/book/轮播图.jpg"></div>
                <div><img src="upload/book/轮播图.jpg"></div>
            </div>
        </div>
    </div>
</div>
--%>


<div class="layui-form-item layui-form" style="text-align: center;padding-top: 10px;padding-bottom: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">图书类别</label>
        <div class="layui-input-inline">
            <select id="interest">
                <span>选择分类</span>
                <option value="" selected>请选择</option>
                <%--<c:forEach items="${type}" var="t">
                    <option value="${t}">${t}</option>
                </c:forEach>--%>
                <%--需要用到for循环来获取类别--%>
            </select>
        </div>
        <label class="layui-form-label">书名</label>
        <div class="layui-input-inline">
            <input class="layui-input" id="search" type="text" placeholder="书名搜索">
        </div>
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input class="layui-input" id="search1" type="text" placeholder="搜索作者">
        </div>
        <button data-type="reload" class="layui-btn">查询</button>
    </div>
</div>
<table style="margin: 40px" class="layui-table-cell" id="BookData" lay-filter="Data"></table><%--其中id是为了让js能找到该控件，lay-filter为事件选择器，其中id可省略--%>

<script>
layui.use('table',function (){
    layui.table.render({
        id: 'testReload'
        ,elem: '#BookData'//选择选择器
        ,url: '${pageContext.request.contextPath}/main.do?cmd=select'
        ,cols: [[
            {field: 'bookId', title: 'ID', sort: true, fixed: 'left',align : 'center'}
            ,{field: 'bookType', title: '类型',align : 'center'}
            ,{field: 'bookName', title: '书名',align : 'center'}
            ,{field: 'bookNub', title: '数量',align : 'center'}
            ,{field: 'bookAuthor', title: '作者',align : 'center'}
            ,{field: 'bookPrice', title: '价格',align : 'center'}
            ,{field: 'bookImgPath', title: '封面',align : 'center',
                templet: function (img) {/*img就是当前行的数据*/
                    if(img.bookImgPath==null){
                        return "<img src='upload/404.jpg' width='100px' height='100px' class='layui-circle'/>";
                    }else{
                        return "<img src='upload/book/"+img.bookImgPath+"' width='100px' height='100px' class='layui-circle'/>";
                    }
                }}
            ,{field: 'bookIssueDate', title: '发行年份',align : 'center'}
            ,{field: 'bookIntroduces', title: '书本介绍'}
            ,{field: 'caozuo' ,title:'操作', align: 'center' ,toolbar: '#barDemo',fixed:'right'}
        ]]
    });

    var $ = layui.$, active = {
        reload: function(){
            var demoReload = $('#interest');
            var demoReload1 = $('#search')
            var demoReload2 = $('#search1')
            console.log(demoReload.val());
            console.log(demoReload1.val());
            console.log(demoReload2.val());
            layui.table.reload('testReload', {
                where: {
                    interest: demoReload.val(),
                    search: demoReload1.val(),
                    search1: demoReload2.val()
                }
            });
        }
    };
    $('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

});


</script>
<script>
    window.onload = SearchVehicleTag();
    function SearchVehicleTag(){
        $.ajax({
            url: "${pageContext.request.contextPath}/main.do?cmd=type"
            ,type: "post"
            ,dataType:"json"
            ,async:false
            ,traditional: true
            ,contentType:"application/json"
            ,success:function (data){
                console.log(data.toString());
                for (var i = 0;i < data.length;i++){
                    var jsonObj = data[i];
                    console.log(data[i]);
                    $("#interest").append("<option value='"+jsonObj+"'>" + jsonObj + "</option>")
                }
            },
            error:function (msg){
                alert("数据加载错误！")
            }
        })
    }

</script>
<style type="text/css">
    .layui-table-cell {
        height: 100px;
        line-height: 100px;
    }
</style>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">借阅</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">归还</a>
</script>

</body>
</html>
